<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示移动端广告布局</title>
</head>
<style>
     /*全局盒模型 start*/
    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        outline: 0;
        box-sizing: border-box;
        padding:0;
        margin:0;
    }
    /*全局盒模型 end*/
    /*此为解决苹果手机对input按钮编译不一样的问题 end*/
    body {
        color: #333;
        font-size: 13px;
        background-color: #f5f5f5;
    }
</style>
<body>
    <div style="overflow: hidden;margin: 0.5rem;border-radius: 0.5rem;">
        <div style="background-color: rgb(255, 255, 255); overflow: hidden; line-height: 0;">
            <div style="float: left;width: 41.6%;">
                <a target="_self" href="#" title="">
                    <img style="width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages4.10qianwan.com%2F10qianwan%2F20190608%2Fb_0_201906080345393289.jpg&refer=http%3A%2F%2Fimages4.10qianwan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664624823&t=384d9de1dda96a9200558c4f4a376eba" title="" alt="">
                </a>
            </div>
            <div style="float: right;width: 58.4%;overflow: hidden;">
                <div style="float: left;width: 100%;">
                    <a target="_self" href="#" title="">
                        <img style="width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages4.10qianwan.com%2F10qianwan%2F20190608%2Fb_0_201906080345393289.jpg&refer=http%3A%2F%2Fimages4.10qianwan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664624823&t=384d9de1dda96a9200558c4f4a376eba" title="" alt="">
                    </a>
                </div>
                <div style="float: left;width: 50%;">
                    <a href="#" target="_self">
                        <img style="width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages4.10qianwan.com%2F10qianwan%2F20190608%2Fb_0_201906080345393289.jpg&refer=http%3A%2F%2Fimages4.10qianwan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664624823&t=384d9de1dda96a9200558c4f4a376eba" title="" alt="">
                    </a>
                </div>
                <div style="float: left;width: 50%;">
                    <a target="_self" href="#" title="">
                        <img style="width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages4.10qianwan.com%2F10qianwan%2F20190608%2Fb_0_201906080345393289.jpg&refer=http%3A%2F%2Fimages4.10qianwan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664624823&t=384d9de1dda96a9200558c4f4a376eba" title="" alt="">
                    </a>
                    <a target="_self" href="#" title="">
                        <img style="width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages4.10qianwan.com%2F10qianwan%2F20190608%2Fb_0_201906080345393289.jpg&refer=http%3A%2F%2Fimages4.10qianwan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664624823&t=384d9de1dda96a9200558c4f4a376eba" title="" alt="">
                    </a>
                </div>
            </div>|
        </div>
    </div>
    
    <div style="overflow: hidden;margin: 0.5rem;border-radius: 0.5rem;">
        <div  style="display: flex; padding: 0px; margin: -0.25rem;">
            <div style="flex: 1;-webkit-box-flex: 1;padding: 0.5rem 0.25rem;">
                <a target="_self" href="#" title="">
                    <img style="width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages4.10qianwan.com%2F10qianwan%2F20190608%2Fb_0_201906080345393289.jpg&refer=http%3A%2F%2Fimages4.10qianwan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664624823&t=384d9de1dda96a9200558c4f4a376eba" title="" alt="">
                </a>
            </div>
            <div style="flex: 1;-webkit-box-flex: 1;padding: 0.5rem 0.25rem;">
                <a target="_self" href="#" title="">
                    <img style="width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages4.10qianwan.com%2F10qianwan%2F20190608%2Fb_0_201906080345393289.jpg&refer=http%3A%2F%2Fimages4.10qianwan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664624823&t=384d9de1dda96a9200558c4f4a376eba" title="" alt="">
                </a>
            </div>
            <div style="flex: 1;-webkit-box-flex: 1;padding: 0.5rem 0.25rem;">
                <a target="_self" href="#" title="">
                    <img style="width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages4.10qianwan.com%2F10qianwan%2F20190608%2Fb_0_201906080345393289.jpg&refer=http%3A%2F%2Fimages4.10qianwan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664624823&t=384d9de1dda96a9200558c4f4a376eba" title="" alt="">
                </a>
            </div>
            <div style="flex: 1;-webkit-box-flex: 1;padding: 0.5rem 0.25rem;">
                <a target="_self" href="#" title="">
                    <img style="width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages4.10qianwan.com%2F10qianwan%2F20190608%2Fb_0_201906080345393289.jpg&refer=http%3A%2F%2Fimages4.10qianwan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664624823&t=384d9de1dda96a9200558c4f4a376eba" title="" alt="">
                </a>
            </div>
        </div>
    </div>
</body>
</html>